<template>
<div class="UserSecurityManager">
    <div class="UserSecurityManager-UpdatePassword">
        <div class="UserSecurityManager-UpdatePassword-title">修改密码</div>
        <div class="UserSecurityManager-UpdatePassword-titles">
            <span>旧密码 : </span>
            <input type="password" class="UserSecurityManager-UpdatePassword-input" v-model="this.pwdInfo.oldPWD"/>
        </div>
        <div class="UserSecurityManager-UpdatePassword-titles">
            <span>新密码 : </span>
            <input type="password" class="UserSecurityManager-UpdatePassword-input"  v-model="this.pwdInfo.newPWD"/>
        </div>
        <div class="UserSecurityManager-UpdatePassword-titles">
            <span>确认新密码 : </span>
            <input type="password" class="UserSecurityManager-UpdatePassword-input"  v-model="this.pwdInfo.doublePWD"/>
        </div>
        <div style="padding-bottom:5px;color: red;font-size:14px" v-show="this.pwdInfo.newPWD != this.pwdInfo.doublePWD">
            两次密码不同,请重新输入
        </div>
        <div style="padding-bottom:5px;color: red;font-size:14px" v-show="(this.pwdInfo.newPWD == '') ||
                                                                            (this.pwdInfo.oldPWD == '') ||
                                                                            (this.pwdInfo.doublePWD == '')">
            密码均不能为空
        </div>
        <div style="padding-bottom:20px;color: red;font-size:14px" v-show="this.pwdInfo.newPWD == this.pwdInfo.oldPWD">
            新密码和旧密码不能一致
        </div>
        <div class="ClickButton">
            <button @click="this.updatePassword()" v-show="!((this.pwdInfo.newPWD != this.pwdInfo.doublePWD) ||
                                                            (this.pwdInfo.newPWD == '') ||
                                                            (this.pwdInfo.oldPWD == '') ||
                                                            (this.pwdInfo.doublePWD == '')||
                                                            (this.pwdInfo.newPWD == this.pwdInfo.oldPWD))">
                确认修改
            </button>
        </div>
    </div>
</div>
</template>

<script>
import request from '../../../utils/request.js'
import axios from 'axios'
import setHeader from '@/api/tools/setHeaders.js'

export default {
    data(){
        return{
            pwdInfo:{
                oldPWD:"",
                newPWD:"",
                doublePWD:""
            }
        }
    },
    methods:{
        updatePassword(){
            let headers = setHeader();
            request.post('/api/user/updatePassword',this.pwdInfo,{headers:headers}).then(res=>{
                if(res.code === "200"){
                    this.$notify.success(res.msg);
                }else{
                    this.$notify.error(res.msg);
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.UserSecurityManager{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 5%;
  min-height: 20px;
  .UserSecurityManager-UpdatePassword{

    .UserSecurityManager-UpdatePassword-title{
        font-weight: bolder;
        padding-bottom: 20px;
    }
    .UserSecurityManager-UpdatePassword-titles{
        padding-bottom: 20px;
        span{
            padding-right: 20px;
        }
        .UserSecurityManager-UpdatePassword-input{
            border: 1px solid rgb(158, 158, 158);
            outline: none;
            padding-left: 5px;
        }
    }
    .ClickButton{
        button{
            border: 1px solid rgb(163, 163, 163);
            background:none;
            border-radius: 5px;
            height: 30px;
            cursor: pointer;
        }
        button:hover{
            background-color: rgb(213, 213, 213);
        }
    }
  }
}
</style>